<script lang="ts" setup>
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";

const props = defineProps({
  header: {
    type: String,
    default: ""
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {};
    }
  },
  shadow: {
    type: String as PropType<
      EpPropMergeType<StringConstructor, "large" | "default" | "small", unknown>
    >,
    default: "always"
  },
  skeleton: {
    type: Boolean,
    default: false
  },
  skeletonRows: {
    type: Number,
    default: 4 //显示的数量会比传入的数量多 1
  }
});

let timer: any = null;
const skeletonShow = ref(true);

timer = setTimeout(() => {
  skeletonShow.value = false;
}, 500);

onBeforeRouteLeave((to, from, next) => {
  clearInterval(timer);
  next();
});
</script>
<template>
  <el-card :body-style="bodyStyle" class="vab-card" :shadow="props.shadow">
    <template v-if="$slots.header || header" #header>
      <slot name="header">{{ header }}</slot>
    </template>
    <el-skeleton
      v-if="skeleton"
      animated
      :loading="skeletonShow"
      :rows="skeletonRows"
    >
      <template #default>
        <slot class="vab-card-transition" />
      </template>
    </el-skeleton>
    <slot v-else class="vab-card-transition" />
  </el-card>
</template>

<style lang="scss" scoped>
.vab-card {
  &-transition {
    transition: $base-transition;
  }
}
</style>
